<template>
  <div
    ref="operate"
    class="operate"
    @mouseenter="enterOperate($event)"
    @mouseleave="leaveOperate($event)"
  >
    <div class="avatar-container">
      <img :src="avatar" alt="" class="avatar" />
    </div>
    <div class="item" @click="logout">logout</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatar: '',
    };
  },
  methods: {
    enterOperate(e) {
      const { target } = e;
      requestAnimationFrame(() => {
        target.style.width = `${50}px`;
        requestAnimationFrame(() => {
          target.style.width = `${this.getWidth()}px`;
        });
      });
    },
    leaveOperate(e) {
      const { target } = e;
      requestAnimationFrame(() => {
        target.style.width = `${this.getWidth()}px`;
        requestAnimationFrame(() => {
          target.style.width = `${50}px`;
        });
      });
    },
    getWidth() {
      let width = 50;
      Object.values(this.$refs.operate.children).forEach((ele) => {
        width += parseInt(getComputedStyle(ele).width, 10);
        width += 28;
      });
      return width;
    },
    logout() {
      this.$store.dispatch('user/logout');
      this.$store.dispatch('permission/removeRoutes');
      this.$router.push('/login');
    },
  },
  created() {
    this.avatar = this.$store.state.user.avatar;
  },
};
</script>

<style scoped>
.operate {
  float: right;
  margin-right: 32px;
  width: 50px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  transition: width 0.3s;
}
.operate .avatar-container {
  width: 50px;
  margin-top: 5px;
  height: 50px;
  border-radius: 50px;
  display: block;
}
.operate .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.operate .item {
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 500;
  margin-left: 28px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .operate {
    display: none !important;
  }
}
</style>
